<template>
  <div class="screen">
    <div class="label-out">{{ $t('可视化数据大屏设置') }}</div>
    <div class="form">
      <div class="label">{{ $t('大屏名称') }}</div>
      <div class="screen-input">
        <el-input v-model="name" :placeholder="$t('请输入大屏名称')" />
      </div>
    </div>
    <el-button type="primary" size="large" @click="handleSubmitScreenName">{{ $t('提交') }}</el-button>
    <div class="form" style="margin-top: 30px;">
      <div class="label">{{ $t('直播一名称') }}</div>
      <div class="screen-input">
        <el-input v-model="name1" :placeholder="$t('请输入直播一名称')" />
      </div>
    </div>
    <div class="form">
      <div class="label">{{ $t('直播一流地址') }}</div>
      <div class="screen-input">
        <el-input v-model="url1" :placeholder="$t('请输入直播一流地址')" />
      </div>
    </div>
    <div class="form">
      <div class="label">{{ $t('直播二名称') }}</div>
      <div class="screen-input">
        <el-input v-model="name2" :placeholder="$t('请输入直播一名称')" />
      </div>
    </div>
    <div class="form">
      <div class="label">{{ $t('直播二流地址') }}</div>
      <div class="screen-input">
        <el-input v-model="url2" :placeholder="$t('请输入直播一流地址')" />
      </div>
    </div>
    <div class="form">
      <div class="label">{{ $t('直播三名称') }}</div>
      <div class="screen-input">
        <el-input v-model="name3" :placeholder="$t('请输入直播三名称')" />
      </div>
    </div>
    <div class="form">
      <div class="label">{{ $t('直播三流地址') }}</div>
      <div class="screen-input">
        <el-input v-model="url3" :placeholder="$t('请输入直播三流地址')" />
      </div>
    </div>
    <el-button type="primary" size="large" @click="handleSubmitLiveStream">{{ $t('提交') }}</el-button>
  </div>
</template>

<script>
import { setScreenName, setLiveStreamUrl } from '@/api/index';
import { ElMessage } from 'element-plus';
import * as api from "@/api";
export default {
  props: {},
  components: {},
  data() {
    return {
      name: '',
      name1: '',
      url1: '',
      name2: '',
      url2: '',
      name3: '',
      url3: '',
    };
  },
  methods: {
    async getLiveStreamUrl() {
      try {
        const { data } = await api.getLiveStreamUrl();
        if (!data.code) {
          this.liveList = data.data;
          this.liveList.forEach((item, idx) => {
            this[`name${idx + 1}`] = item.name;
            this[`url${idx + 1}`] = item.url;
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getScreenName() {
      try {
        const { data } = await api.getScreenName();
        if (!data.code) {
          this.name = data.data;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 提交大屏名称
    async handleSubmitScreenName() {
      if (!this.name) {
        // 使用 $t 进行多语言处理
        this.$message.error(this.$t('大屏名称不能为空'));
        return;
      }
      try {
        const { data } = await setScreenName({ name: this.name });
        if (data.code === 0) {
          // 使用 $t 进行多语言处理
          this.$message.success(this.$t('大屏名称设置成功'));
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {
        console.error(error);
        // 使用 $t 进行多语言处理
        this.$message.error(this.$t('提交失败，请稍后重试'));
      }
    },
    // 提交直播流地址
    async handleSubmitLiveStream() {
      // 校验直播一
      if ((this.name1 && !this.url1) || (!this.name1 && this.url1)) {
        // 使用 $t 进行多语言处理
        this.$message.error(this.$t('直播一的名称和流地址必须同时填写'));
        return;
      }
      // 校验直播二
      if ((this.name2 && !this.url2) || (!this.name2 && this.url2)) {
        // 使用 $t 进行多语言处理
        this.$message.error(this.$t('直播二的名称和流地址必须同时填写'));
        return;
      }
      // 校验直播三
      if ((this.name3 && !this.url3) || (!this.name3 && this.url3)) {
        // 使用 $t 进行多语言处理
        this.$message.error(this.$t('直播三的名称和流地址必须同时填写'));
        return;
      }

      // 如果没有填写任何直播信息
      if (!this.name1 && !this.url1 && !this.name2 && !this.url2 && !this.name3 && !this.url3) {
        // 使用 $t 进行多语言处理
        this.$message.error(this.$t('请至少填写一组完整的直播信息'));
        return;
      }
      try {
        const { data } = await setLiveStreamUrl({
          name1: this.name1,
          url1: this.url1,
          name2: this.name2,
          url2: this.url2,
          name3: this.name3,
          url3: this.url3,
        });
        if (data.code === 0) {
          // 使用 $t 进行多语言处理
          this.$message.success(this.$t('直播流地址设置成功'));
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {
        console.error(error);
        // 使用 $t 进行多语言处理
        this.$message.error(this.$t('提交失败，请稍后重试'));
      }
    },
  },
  mounted() {
    this.getScreenName()
    this.getLiveStreamUrl();
  }
};
</script>

<style lang="scss" scoped>
.screen {
  margin-top: 20px;
  padding-bottom: 20px;

  .form {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .label {
      margin-right: 30px;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      width: 120px;
    }
  }

  .label-out {
    font-weight: 400;
    font-size: 24px;
    color: #ffffff;
    padding: 0 0 30px;
  }
}
</style>
<style lang="scss">
.screen-input {
  .el-input__wrapper {
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
  }

  .el-input {
    width: 413px;

    .el-input__inner {
      width: 413px;
      box-shadow: none;
      height: 46px;
      background: #000000;
      color: #fff;
      padding: 8px 16px;
    }
  }
}
</style>
